ರಿಯಾಕ್ಟ್ ಟೆಸ್ಟಿಂಗ್ ಲೈಬ್ರರಿ: ಜಾಗತಿಕ ತಂಡಗಳಿಗೆ ಕಾಂಪೊನೆಂಟ್ ಟೆಸ್ಟಿಂಗ್‌ನ ಅತ್ಯುತ್ತಮ ಅಭ್ಯಾಸಗಳು

ವೆಬ್ ಡೆವಲಪ್‌ಮೆಂಟ್‌ನ ನಿರಂತರವಾಗಿ ಬದಲಾಗುತ್ತಿರುವ ಜಗತ್ತಿನಲ್ಲಿ, ನಿಮ್ಮ ರಿಯಾಕ್ಟ್ ಅಪ್ಲಿಕೇಶನ್‌ಗಳ ವಿಶ್ವಾಸಾರ್ಹತೆ ಮತ್ತು ಗುಣಮಟ್ಟವನ್ನು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳುವುದು ಅತ್ಯಂತ ಮುಖ್ಯ. ವೈವಿಧ್ಯಮಯ ಬಳಕೆದಾರರನ್ನು ಮತ್ತು ಪ್ರವೇಶಸಾಧ್ಯತೆಯ ಅವಶ್ಯಕತೆಗಳನ್ನು ಹೊಂದಿರುವ ಪ್ರಾಜೆಕ್ಟ್‌ಗಳಲ್ಲಿ ಕೆಲಸ ಮಾಡುವ ಜಾಗತಿಕ ತಂಡಗಳಿಗೆ ಇದು ವಿಶೇಷವಾಗಿ ಸತ್ಯ. ರಿಯಾಕ್ಟ್ ಟೆಸ್ಟಿಂಗ್ ಲೈಬ್ರರಿ (RTL) ಕಾಂಪೊನೆಂಟ್ ಟೆಸ್ಟಿಂಗ್‌ಗೆ ಒಂದು ಶಕ್ತಿಯುತ ಮತ್ತು ಬಳಕೆದಾರ-ಕೇಂದ್ರಿತ ವಿಧಾನವನ್ನು ಒದಗಿಸುತ್ತದೆ. ಅನುಷ್ಠಾನದ ವಿವರಗಳ ಮೇಲೆ ಗಮನಹರಿಸುವ ಸಾಂಪ್ರದಾಯಿಕ ಪರೀಕ್ಷಾ ವಿಧಾನಗಳಿಗಿಂತ ಭಿನ್ನವಾಗಿ, RTL ನಿಮ್ಮ ಕಾಂಪೊನೆಂಟ್‌ಗಳನ್ನು ಬಳಕೆದಾರರು ಸಂವಹನ ನಡೆಸುವ ರೀತಿಯಲ್ಲಿ ಪರೀಕ್ಷಿಸಲು ಪ್ರೋತ್ಸಾಹಿಸುತ್ತದೆ, ಇದು ಹೆಚ್ಚು ದೃಢವಾದ ಮತ್ತು ನಿರ್ವಹಿಸಬಲ್ಲ ಪರೀಕ್ಷೆಗಳಿಗೆ ಕಾರಣವಾಗುತ್ತದೆ. ಈ ಸಮಗ್ರ ಮಾರ್ಗದರ್ಶಿ ನಿಮ್ಮ ರಿಯಾಕ್ಟ್ ಪ್ರಾಜೆಕ್ಟ್‌ಗಳಲ್ಲಿ RTL ಅನ್ನು ಬಳಸಿಕೊಳ್ಳುವ ಅತ್ಯುತ್ತಮ ಅಭ್ಯಾಸಗಳನ್ನು ವಿವರಿಸುತ್ತದೆ, ಮತ್ತು ಜಾಗತಿಕ ಪ್ರೇಕ್ಷಕರಿಗೆ ಸೂಕ್ತವಾದ ಅಪ್ಲಿಕೇಶನ್‌ಗಳನ್ನು ನಿರ್ಮಿಸುವತ್ತ ಗಮನಹರಿಸುತ್ತದೆ.

ರಿಯಾಕ್ಟ್ ಟೆಸ್ಟಿಂಗ್ ಲೈಬ್ರರಿ ಏಕೆ?

ಅತ್ಯುತ್ತಮ ಅಭ್ಯಾಸಗಳನ್ನು ತಿಳಿಯುವ ಮೊದಲು, RTL ಇತರ ಟೆಸ್ಟಿಂಗ್ ಲೈಬ್ರರಿಗಳಿಂದ ಏಕೆ ಭಿನ್ನವಾಗಿದೆ ಎಂಬುದನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದು ಬಹಳ ಮುಖ್ಯ. ಇಲ್ಲಿ ಕೆಲವು ಪ್ರಮುಖ ಅನುಕೂಲಗಳಿವೆ:

• ಬಳಕೆದಾರ-ಕೇಂದ್ರಿತ ವಿಧಾನ: RTL ಬಳಕೆದಾರರ ದೃಷ್ಟಿಕೋನದಿಂದ ಕಾಂಪೊನೆಂಟ್‌ಗಳನ್ನು ಪರೀಕ್ಷಿಸುವುದಕ್ಕೆ ಆದ್ಯತೆ ನೀಡುತ್ತದೆ. ಬಳಕೆದಾರರು ಮಾಡುವಂತೆಯೇ (ಉದಾ., ಬಟನ್‌ಗಳನ್ನು ಕ್ಲಿಕ್ ಮಾಡುವುದು, ಇನ್‌ಪುಟ್ ಫೀಲ್ಡ್‌ಗಳಲ್ಲಿ ಟೈಪ್ ಮಾಡುವುದು) ನೀವು ಕಾಂಪೊನೆಂಟ್‌ನೊಂದಿಗೆ ಸಂವಹನ ನಡೆಸುತ್ತೀರಿ, ಇದು ಹೆಚ್ಚು ವಾಸ್ತವಿಕ ಮತ್ತು ವಿಶ್ವಾಸಾರ್ಹ ಪರೀಕ್ಷಾ ಅನುಭವವನ್ನು ಖಚಿತಪಡಿಸುತ್ತದೆ.
• ಪ್ರವೇಶಸಾಧ್ಯತೆ-ಕೇಂದ್ರಿತ: ಅಂಗವಿಕಲ ಬಳಕೆದಾರರನ್ನು ಪರಿಗಣಿಸುವ ರೀತಿಯಲ್ಲಿ ಕಾಂಪೊನೆಂಟ್‌ಗಳನ್ನು ಪರೀಕ್ಷಿಸಲು ಪ್ರೋತ್ಸಾಹಿಸುವ ಮೂಲಕ, ಪ್ರವೇಶಿಸಬಹುದಾದ ಕಾಂಪೊನೆಂಟ್‌ಗಳನ್ನು ಬರೆಯಲು RTL ಉತ್ತೇಜಿಸುತ್ತದೆ. ಇದು WCAG ನಂತಹ ಜಾಗತಿಕ ಪ್ರವೇಶಸಾಧ್ಯತೆಯ ಮಾನದಂಡಗಳಿಗೆ ಅನುಗುಣವಾಗಿರುತ್ತದೆ.
• ಕಡಿಮೆ ನಿರ್ವಹಣೆ: ಅನುಷ್ಠಾನದ ವಿವರಗಳನ್ನು (ಉದಾ., ಆಂತರಿಕ ಸ್ಥಿತಿ, ನಿರ್ದಿಷ್ಟ ಫಂಕ್ಷನ್ ಕಾಲ್‌ಗಳು) ಪರೀಕ್ಷಿಸುವುದನ್ನು ತಪ್ಪಿಸುವ ಮೂಲಕ, ನಿಮ್ಮ ಕೋಡ್ ಅನ್ನು ನೀವು ರಿಫ್ಯಾಕ್ಟರ್ ಮಾಡಿದಾಗ RTL ಪರೀಕ್ಷೆಗಳು ಮುರಿಯುವ ಸಾಧ್ಯತೆ ಕಡಿಮೆ. ಇದು ಹೆಚ್ಚು ನಿರ್ವಹಿಸಬಲ್ಲ ಮತ್ತು ಸ್ಥಿತಿಸ್ಥಾಪಕ ಪರೀಕ್ಷೆಗಳಿಗೆ ಕಾರಣವಾಗುತ್ತದೆ.
• ಉತ್ತಮ ಕೋಡ್ ವಿನ್ಯಾಸ: RTL ನ ಬಳಕೆದಾರ-ಕೇಂದ್ರಿತ ವಿಧಾನವು ಉತ್ತಮ ಕಾಂಪೊನೆಂಟ್ ವಿನ್ಯಾಸಕ್ಕೆ ಕಾರಣವಾಗುತ್ತದೆ, ಏಕೆಂದರೆ ಬಳಕೆದಾರರು ನಿಮ್ಮ ಕಾಂಪೊನೆಂಟ್‌ಗಳೊಂದಿಗೆ ಹೇಗೆ ಸಂವಹನ ನಡೆಸುತ್ತಾರೆ ಎಂಬುದರ ಬಗ್ಗೆ ನೀವು ಯೋಚಿಸುವಂತೆ ಮಾಡುತ್ತದೆ.
• ಸಮುದಾಯ ಮತ್ತು ಪರಿಸರ ವ್ಯವಸ್ಥೆ: RTL ಒಂದು ದೊಡ್ಡ ಮತ್ತು ಸಕ್ರಿಯ ಸಮುದಾಯವನ್ನು ಹೊಂದಿದೆ, ಇದು ಸಾಕಷ್ಟು ಸಂಪನ್ಮೂಲಗಳು, ಬೆಂಬಲ ಮತ್ತು ವಿಸ್ತರಣೆಗಳನ್ನು ಒದಗಿಸುತ್ತದೆ.

ನಿಮ್ಮ ಟೆಸ್ಟಿಂಗ್ ಪರಿಸರವನ್ನು ಸ್ಥಾಪಿಸುವುದು

RTL ನೊಂದಿಗೆ ಪ್ರಾರಂಭಿಸಲು, ನಿಮ್ಮ ಟೆಸ್ಟಿಂಗ್ ಪರಿಸರವನ್ನು ನೀವು ಸ್ಥಾಪಿಸಬೇಕಾಗುತ್ತದೆ. ಇಲ್ಲಿ ಕ್ರಿಯೇಟ್ ರಿಯಾಕ್ಟ್ ಆಪ್ (CRA) ಬಳಸಿಕೊಂಡು ಒಂದು ಮೂಲಭೂತ ಸೆಟಪ್ ಇದೆ, ಇದು ಜೆಸ್ಟ್ ಮತ್ತು RTL ನೊಂದಿಗೆ ಮೊದಲೇ ಕಾನ್ಫಿಗರ್ ಆಗಿರುತ್ತದೆ:

npx create-react-app my-react-app
cd my-react-app
npm install --save-dev @testing-library/react @testing-library/jest-dom

ವಿವರಣೆ:

• `npx create-react-app my-react-app`: ಕ್ರಿಯೇಟ್ ರಿಯಾಕ್ಟ್ ಆಪ್ ಬಳಸಿ ಹೊಸ ರಿಯಾಕ್ಟ್ ಪ್ರಾಜೆಕ್ಟ್ ಅನ್ನು ರಚಿಸುತ್ತದೆ.
• `cd my-react-app`: ಹೊಸದಾಗಿ ರಚಿಸಲಾದ ಪ್ರಾಜೆಕ್ಟ್ ಡೈರೆಕ್ಟರಿಗೆ ನ್ಯಾವಿಗೇಟ್ ಮಾಡುತ್ತದೆ.
• `npm install --save-dev @testing-library/react @testing-library/jest-dom`: ಅಗತ್ಯವಿರುವ RTL ಪ್ಯಾಕೇಜ್‌ಗಳನ್ನು ಡೆವಲಪ್‌ಮೆಂಟ್ ಡಿಪೆಂಡೆನ್ಸಿಗಳಾಗಿ ಇನ್‌ಸ್ಟಾಲ್ ಮಾಡುತ್ತದೆ. `@testing-library/react` ಕೋರ್ RTL ಕಾರ್ಯವನ್ನು ಒದಗಿಸುತ್ತದೆ, ಆದರೆ `@testing-library/jest-dom` DOM ನೊಂದಿಗೆ ಕೆಲಸ ಮಾಡಲು ಉಪಯುಕ್ತವಾದ ಜೆಸ್ಟ್ ಮ್ಯಾಚರ್‌ಗಳನ್ನು ಒದಗಿಸುತ್ತದೆ.

ನೀವು CRA ಬಳಸುತ್ತಿಲ್ಲವಾದರೆ, ನೀವು ಜೆಸ್ಟ್ ಮತ್ತು RTL ಅನ್ನು ಪ್ರತ್ಯೇಕವಾಗಿ ಇನ್‌ಸ್ಟಾಲ್ ಮಾಡಬೇಕಾಗುತ್ತದೆ ಮತ್ತು RTL ಬಳಸಲು ಜೆಸ್ಟ್ ಅನ್ನು ಕಾನ್ಫಿಗರ್ ಮಾಡಬೇಕಾಗುತ್ತದೆ.

ರಿಯಾಕ್ಟ್ ಟೆಸ್ಟಿಂಗ್ ಲೈಬ್ರರಿಯೊಂದಿಗೆ ಕಾಂಪೊನೆಂಟ್ ಟೆಸ್ಟಿಂಗ್‌ನ ಅತ್ಯುತ್ತಮ ಅಭ್ಯಾಸಗಳು

1. ಬಳಕೆದಾರರ ಸಂವಹನಗಳನ್ನು ಹೋಲುವ ಪರೀಕ್ಷೆಗಳನ್ನು ಬರೆಯಿರಿ

RTL ನ ಮೂಲ ತತ್ವವೆಂದರೆ ಬಳಕೆದಾರರು ಮಾಡುವ ರೀತಿಯಲ್ಲಿ ಕಾಂಪೊನೆಂಟ್‌ಗಳನ್ನು ಪರೀಕ್ಷಿಸುವುದು. ಇದರರ್ಥ, ಆಂತರಿಕ ಅನುಷ್ಠಾನದ ವಿವರಗಳಿಗಿಂತ ಹೆಚ್ಚಾಗಿ ಬಳಕೆದಾರರು ಏನು ನೋಡುತ್ತಾರೆ ಮತ್ತು ಮಾಡುತ್ತಾರೆ ಎಂಬುದರ ಮೇಲೆ ಗಮನಹರಿಸುವುದು. RTL ಒದಗಿಸಿದ `screen` ಆಬ್ಜೆಕ್ಟ್ ಅನ್ನು ಬಳಸಿ, ಎಲಿಮೆಂಟ್‌ಗಳನ್ನು ಅವುಗಳ ಟೆಕ್ಸ್ಟ್, ರೋಲ್, ಅಥವಾ ಪ್ರವೇಶಸಾಧ್ಯತೆಯ ಲೇಬಲ್‌ಗಳ ಆಧಾರದ ಮೇಲೆ ಕ್ವೆರಿ ಮಾಡಿ.

ಉದಾಹರಣೆ: ಬಟನ್ ಕ್ಲಿಕ್ ಅನ್ನು ಪರೀಕ್ಷಿಸುವುದು

ನಿಮ್ಮ ಬಳಿ ಒಂದು ಸರಳ ಬಟನ್ ಕಾಂಪೊನೆಂಟ್ ಇದೆ ಎಂದು ಭಾವಿಸೋಣ:

// Button.js
import React from 'react';

function Button({ onClick, children }) {
  return {children};
}

export default Button;

RTL ಬಳಸಿ ಇದನ್ನು ಹೇಗೆ ಪರೀಕ್ಷಿಸುವುದು ಎಂಬುದು ಇಲ್ಲಿದೆ:

// Button.test.js
import React from 'react';
import { render, screen, fireEvent } from '@testing-library/react';
import Button from './Button';

describe('Button Component', () => {
  it('calls the onClick handler when clicked', () => {
    const handleClick = jest.fn();
    render(Click Me);

    const buttonElement = screen.getByText('Click Me');
    fireEvent.click(buttonElement);

    expect(handleClick).toHaveBeenCalledTimes(1);
  });
});

ವಿವರಣೆ:

• `render(Click Me)`: ಮಾಕ್ `onClick` ಹ್ಯಾಂಡ್ಲರ್‌ನೊಂದಿಗೆ ಬಟನ್ ಕಾಂಪೊನೆಂಟ್ ಅನ್ನು ರೆಂಡರ್ ಮಾಡುತ್ತದೆ.
• `screen.getByText('Click Me')`: "Click Me" ಎಂಬ ಪಠ್ಯವನ್ನು ಹೊಂದಿರುವ ಎಲಿಮೆಂಟ್‌ಗಾಗಿ ಡಾಕ್ಯುಮೆಂಟ್ ಅನ್ನು ಕ್ವೆರಿ ಮಾಡುತ್ತದೆ. ಬಳಕೆದಾರರು ಬಟನ್ ಅನ್ನು ಹೀಗೆ ಗುರುತಿಸುತ್ತಾರೆ.
• `fireEvent.click(buttonElement)`: ಬಟನ್ ಎಲಿಮೆಂಟ್ ಮೇಲೆ ಕ್ಲಿಕ್ ಈವೆಂಟ್ ಅನ್ನು ಅನುಕರಿಸುತ್ತದೆ.
• `expect(handleClick).toHaveBeenCalledTimes(1)`: `onClick` ಹ್ಯಾಂಡ್ಲರ್ ಒಮ್ಮೆ ಕರೆಯಲ್ಪಟ್ಟಿದೆ ಎಂದು ಖಚಿತಪಡಿಸುತ್ತದೆ.

ಅನುಷ್ಠಾನದ ವಿವರಗಳನ್ನು ಪರೀಕ್ಷಿಸುವುದಕ್ಕಿಂತ ಇದು ಏಕೆ ಉತ್ತಮವಾಗಿದೆ: ನೀವು ಬಟನ್ ಕಾಂಪೊನೆಂಟ್ ಅನ್ನು ಬೇರೆ ಈವೆಂಟ್ ಹ್ಯಾಂಡ್ಲರ್ ಬಳಸಲು ಅಥವಾ ಆಂತರಿಕ ಸ್ಥಿತಿಯನ್ನು ಬದಲಾಯಿಸಲು ರಿಫ್ಯಾಕ್ಟರ್ ಮಾಡುತ್ತೀರಿ ಎಂದು ಕಲ್ಪಿಸಿಕೊಳ್ಳಿ. ನೀವು ನಿರ್ದಿಷ್ಟ ಈವೆಂಟ್ ಹ್ಯಾಂಡ್ಲರ್ ಫಂಕ್ಷನ್ ಅನ್ನು ಪರೀಕ್ಷಿಸುತ್ತಿದ್ದರೆ, ನಿಮ್ಮ ಪರೀಕ್ಷೆ ಮುರಿಯುತ್ತದೆ. ಬಳಕೆದಾರರ ಸಂವಹನದ (ಬಟನ್ ಕ್ಲಿಕ್ ಮಾಡುವುದು) ಮೇಲೆ ಗಮನಹರಿಸುವ ಮೂಲಕ, ರಿಫ್ಯಾಕ್ಟರಿಂಗ್ ನಂತರವೂ ಪರೀಕ್ಷೆ ಮಾನ್ಯವಾಗಿರುತ್ತದೆ.

2. ಬಳಕೆದಾರರ ಉದ್ದೇಶದ ಆಧಾರದ ಮೇಲೆ ಕ್ವೆರಿಗಳಿಗೆ ಆದ್ಯತೆ ನೀಡಿ

RTL ಎಲಿಮೆಂಟ್‌ಗಳನ್ನು ಹುಡುಕಲು ವಿವಿಧ ಕ್ವೆರಿ ವಿಧಾನಗಳನ್ನು ಒದಗಿಸುತ್ತದೆ. ಈ ಕೆಳಗಿನ ಕ್ವೆರಿಗಳಿಗೆ ಈ ಕ್ರಮದಲ್ಲಿ ಆದ್ಯತೆ ನೀಡಿ, ಏಕೆಂದರೆ ಅವು ಬಳಕೆದಾರರು ನಿಮ್ಮ ಕಾಂಪೊನೆಂಟ್‌ಗಳನ್ನು ಹೇಗೆ ಗ್ರಹಿಸುತ್ತಾರೆ ಮತ್ತು ಸಂವಹನ ನಡೆಸುತ್ತಾರೆ ಎಂಬುದನ್ನು ಉತ್ತಮವಾಗಿ ಪ್ರತಿಬಿಂಬಿಸುತ್ತವೆ:

• getByRole: ಈ ಕ್ವೆರಿ ಹೆಚ್ಚು ಪ್ರವೇಶಿಸಬಹುದಾದದ್ದು ಮತ್ತು ನಿಮ್ಮ ಮೊದಲ ಆಯ್ಕೆಯಾಗಿರಬೇಕು. ಇದು ಎಲಿಮೆಂಟ್‌ಗಳನ್ನು ಅವುಗಳ ARIA ರೋಲ್‌ಗಳ (ಉದಾ., button, link, heading) ಆಧಾರದ ಮೇಲೆ ಹುಡುಕಲು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ.
• getByLabelText: ನಿರ್ದಿಷ್ಟ ಲೇಬಲ್‌ಗೆ ಸಂಬಂಧಿಸಿದ ಎಲಿಮೆಂಟ್‌ಗಳನ್ನು ಹುಡುಕಲು ಇದನ್ನು ಬಳಸಿ, ಉದಾಹರಣೆಗೆ ಇನ್‌ಪುಟ್ ಫೀಲ್ಡ್‌ಗಳು.
• getByPlaceholderText: ಇನ್‌ಪುಟ್ ಫೀಲ್ಡ್‌ಗಳನ್ನು ಅವುಗಳ ಪ್ಲೇಸ್‌ಹೋಲ್ಡರ್ ಪಠ್ಯದ ಆಧಾರದ ಮೇಲೆ ಹುಡುಕಲು ಇದನ್ನು ಬಳಸಿ.
• getByText: ಎಲಿಮೆಂಟ್‌ಗಳನ್ನು ಅವುಗಳ ಪಠ್ಯ ವಿಷಯದ ಆಧಾರದ ಮೇಲೆ ಹುಡುಕಲು ಇದನ್ನು ಬಳಸಿ. ನಿರ್ದಿಷ್ಟವಾಗಿರಿ ಮತ್ತು ಅನೇಕ ಸ್ಥಳಗಳಲ್ಲಿ ಕಾಣಿಸಬಹುದಾದ ಸಾಮಾನ್ಯ ಪಠ್ಯವನ್ನು ಬಳಸುವುದನ್ನು ತಪ್ಪಿಸಿ.
• getByDisplayValue: ಇನ್‌ಪುಟ್ ಫೀಲ್ಡ್‌ಗಳನ್ನು ಅವುಗಳ ಪ್ರಸ್ತುತ ಮೌಲ್ಯದ ಆಧಾರದ ಮೇಲೆ ಹುಡುಕಲು ಇದನ್ನು ಬಳಸಿ.

ಉದಾಹರಣೆ: ಫಾರ್ಮ್ ಇನ್‌ಪುಟ್ ಅನ್ನು ಪರೀಕ್ಷಿಸುವುದು

// Input.js
import React from 'react';

function Input({ label, placeholder, value, onChange }) {
  return (
    

      {label}
      
    
  );
}

export default Input;

ಶಿಫಾರಸು ಮಾಡಲಾದ ಕ್ವೆರಿ ಕ್ರಮವನ್ನು ಬಳಸಿ ಇದನ್ನು ಹೇಗೆ ಪರೀಕ್ಷಿಸುವುದು ಎಂಬುದು ಇಲ್ಲಿದೆ:

// Input.test.js
import React from 'react';
import { render, screen, fireEvent } from '@testing-library/react';
import Input from './Input';

describe('Input Component', () => {
  it('updates the value when the user types', () => {
    const handleChange = jest.fn();
    render();

    const inputElement = screen.getByLabelText('Name');
    fireEvent.change(inputElement, { target: { value: 'John Doe' } });

    expect(handleChange).toHaveBeenCalledTimes(1);
    expect(handleChange).toHaveBeenCalledWith(expect.objectContaining({ target: { value: 'John Doe' } }));
  });
});

ವಿವರಣೆ:

• `screen.getByLabelText('Name')`: "Name" ಲೇಬಲ್‌ಗೆ ಸಂಬಂಧಿಸಿದ ಇನ್‌ಪುಟ್ ಫೀಲ್ಡ್ ಅನ್ನು ಹುಡುಕಲು `getByLabelText` ಅನ್ನು ಬಳಸುತ್ತದೆ. ಇನ್‌ಪುಟ್ ಅನ್ನು ಪತ್ತೆಹಚ್ಚಲು ಇದು ಅತ್ಯಂತ ಪ್ರವೇಶಿಸಬಹುದಾದ ಮತ್ತು ಬಳಕೆದಾರ-ಸ್ನೇಹಿ ಮಾರ್ಗವಾಗಿದೆ.

3. ಅನುಷ್ಠಾನದ ವಿವರಗಳನ್ನು ಪರೀಕ್ಷಿಸುವುದನ್ನು ತಪ್ಪಿಸಿ

ಹಿಂದೆಯೇ ಹೇಳಿದಂತೆ, ಆಂತರಿಕ ಸ್ಥಿತಿ, ಫಂಕ್ಷನ್ ಕಾಲ್‌ಗಳು, ಅಥವಾ ನಿರ್ದಿಷ್ಟ CSS ಕ್ಲಾಸ್‌ಗಳನ್ನು ಪರೀಕ್ಷಿಸುವುದನ್ನು ತಪ್ಪಿಸಿ. ಇವುಗಳು ಅನುಷ್ಠಾನದ ವಿವರಗಳಾಗಿದ್ದು, ಬದಲಾವಣೆಗೆ ಒಳಪಟ್ಟಿರುತ್ತವೆ ಮತ್ತು ದುರ್ಬಲ ಪರೀಕ್ಷೆಗಳಿಗೆ ಕಾರಣವಾಗಬಹುದು. ಕಾಂಪೊನೆಂಟ್‌ನ ಗಮನಿಸಬಹುದಾದ ನಡವಳಿಕೆಯ ಮೇಲೆ ಗಮನಹರಿಸಿ.

ಉದಾಹರಣೆ: ಸ್ಥಿತಿಯನ್ನು ನೇರವಾಗಿ ಪರೀಕ್ಷಿಸುವುದನ್ನು ತಪ್ಪಿಸಿ

ನಿರ್ದಿಷ್ಟ ಸ್ಥಿತಿ ವೇರಿಯೇಬಲ್ ನವೀಕರಿಸಲಾಗಿದೆಯೇ ಎಂದು ಪರೀಕ್ಷಿಸುವ ಬದಲು, ಆ ಸ್ಥಿತಿಯ ಆಧಾರದ ಮೇಲೆ ಕಾಂಪೊನೆಂಟ್ ಸರಿಯಾದ ಔಟ್‌ಪುಟ್ ಅನ್ನು ರೆಂಡರ್ ಮಾಡುತ್ತದೆಯೇ ಎಂದು ಪರೀಕ್ಷಿಸಿ. ಉದಾಹರಣೆಗೆ, ಒಂದು ಕಾಂಪೊನೆಂಟ್ ಬೂಲಿಯನ್ ಸ್ಥಿತಿ ವೇರಿಯೇಬಲ್ ಆಧಾರದ ಮೇಲೆ ಸಂದೇಶವನ್ನು ಪ್ರದರ್ಶಿಸಿದರೆ, ಸ್ಥಿತಿ ವೇರಿಯೇಬಲ್ ಅನ್ನು ಪರೀಕ್ಷಿಸುವ ಬದಲು, ಸಂದೇಶವು ಪ್ರದರ್ಶಿತವಾಗಿದೆಯೇ ಅಥವಾ ಮರೆಮಾಡಲಾಗಿದೆಯೇ ಎಂದು ಪರೀಕ್ಷಿಸಿ.

4. ನಿರ್ದಿಷ್ಟ ಸಂದರ್ಭಗಳಲ್ಲಿ `data-testid` ಬಳಸಿ

`data-testid` ಗುಣಲಕ್ಷಣಗಳನ್ನು ಬಳಸುವುದನ್ನು ಸಾಮಾನ್ಯವಾಗಿ ತಪ್ಪಿಸುವುದು ಉತ್ತಮವಾದರೂ, ಅವುಗಳು ಸಹಾಯಕವಾಗುವ ನಿರ್ದಿಷ್ಟ ಸಂದರ್ಭಗಳಿವೆ:

• ಯಾವುದೇ ಶಬ್ದಾರ್ಥವಿಲ್ಲದ ಎಲಿಮೆಂಟ್‌ಗಳು: ನೀವು ಅರ್ಥಪೂರ್ಣ ರೋಲ್, ಲೇಬಲ್, ಅಥವಾ ಪಠ್ಯವನ್ನು ಹೊಂದಿರದ ಎಲಿಮೆಂಟ್ ಅನ್ನು ಗುರಿಯಾಗಿಸಬೇಕಾದರೆ, ನೀವು `data-testid` ಅನ್ನು ಬಳಸಬಹುದು.
• ಸಂಕೀರ್ಣ ಕಾಂಪೊನೆಂಟ್ ರಚನೆಗಳು: ಸಂಕೀರ್ಣ ಕಾಂಪೊನೆಂಟ್ ರಚನೆಗಳಲ್ಲಿ, ದುರ್ಬಲ ಸೆಲೆಕ್ಟರ್‌ಗಳನ್ನು ಅವಲಂಬಿಸದೆ ನಿರ್ದಿಷ್ಟ ಎಲಿಮೆಂಟ್‌ಗಳನ್ನು ಗುರಿಯಾಗಿಸಲು `data-testid` ನಿಮಗೆ ಸಹಾಯ ಮಾಡುತ್ತದೆ.
• ಪ್ರವೇಶಸಾಧ್ಯತೆ ಪರೀಕ್ಷೆ: ಸೈಪ್ರೆಸ್ ಅಥವಾ ಪ್ಲೇರೈಟ್‌ನಂತಹ ಸಾಧನಗಳೊಂದಿಗೆ ಪ್ರವೇಶಸಾಧ್ಯತೆ ಪರೀಕ್ಷೆಯ ಸಮಯದಲ್ಲಿ ನಿರ್ದಿಷ್ಟ ಎಲಿಮೆಂಟ್‌ಗಳನ್ನು ಗುರುತಿಸಲು `data-testid` ಅನ್ನು ಬಳಸಬಹುದು.

ಉದಾಹರಣೆ: `data-testid` ಬಳಸುವುದು

// MyComponent.js
import React from 'react';

function MyComponent() {
  return (
    

      
This is my component.
    
  );
}

export default MyComponent;

// MyComponent.test.js
import React from 'react';
import { render, screen } from '@testing-library/react';
import MyComponent from './MyComponent';

describe('MyComponent', () => {
  it('renders the component container', () => {
    render();
    const containerElement = screen.getByTestId('my-component-container');
    expect(containerElement).toBeInTheDocument();
  });
});

ಪ್ರಮುಖ: `data-testid` ಅನ್ನು ಮಿತವಾಗಿ ಬಳಸಿ ಮತ್ತು ಇತರ ಕ್ವೆರಿ ವಿಧಾನಗಳು ಸೂಕ್ತವಲ್ಲದಿದ್ದಾಗ ಮಾತ್ರ ಬಳಸಿ.

5. ಅರ್ಥಪೂರ್ಣ ಪರೀಕ್ಷಾ ವಿವರಣೆಗಳನ್ನು ಬರೆಯಿರಿ

ಪ್ರತಿ ಪರೀಕ್ಷೆಯ ಉದ್ದೇಶವನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳಲು ಮತ್ತು ವೈಫಲ್ಯಗಳನ್ನು ಡೀಬಗ್ ಮಾಡಲು ಸ್ಪಷ್ಟ ಮತ್ತು ಸಂಕ್ಷಿಪ್ತ ಪರೀಕ್ಷಾ ವಿವರಣೆಗಳು ನಿರ್ಣಾಯಕ. ಪರೀಕ್ಷೆಯು ಏನನ್ನು ಪರಿಶೀಲಿಸುತ್ತಿದೆ ಎಂಬುದನ್ನು ಸ್ಪಷ್ಟವಾಗಿ ವಿವರಿಸುವ ವಿವರಣಾತ್ಮಕ ಹೆಸರುಗಳನ್ನು ಬಳಸಿ.

ಉದಾಹರಣೆ: ಉತ್ತಮ vs. ಕೆಟ್ಟ ಪರೀಕ್ಷಾ ವಿವರಣೆಗಳು

ಕೆಟ್ಟದು: `it('works')`

ಉತ್ತಮ: `it('displays the correct greeting message')`

ಇನ್ನೂ ಉತ್ತಮ: `it('displays the greeting message "Hello, World!" when the name prop is not provided')`

ಉತ್ತಮ ಉದಾಹರಣೆಯು ನಿರ್ದಿಷ್ಟ ಪರಿಸ್ಥಿತಿಗಳಲ್ಲಿ ಕಾಂಪೊನೆಂಟ್‌ನ ನಿರೀಕ್ಷಿತ ನಡವಳಿಕೆಯನ್ನು ಸ್ಪಷ್ಟವಾಗಿ ಹೇಳುತ್ತದೆ.

6. ನಿಮ್ಮ ಪರೀಕ್ಷೆಗಳನ್ನು ಚಿಕ್ಕದಾಗಿ ಮತ್ತು ಕೇಂದ್ರೀಕೃತವಾಗಿಡಿ

ಪ್ರತಿಯೊಂದು ಪರೀಕ್ಷೆಯು ಕಾಂಪೊನೆಂಟ್‌ನ ನಡವಳಿಕೆಯ ಒಂದೇ ಅಂಶವನ್ನು ಪರಿಶೀಲಿಸುವುದರ ಮೇಲೆ ಗಮನಹರಿಸಬೇಕು. ಅನೇಕ ಸನ್ನಿವೇಶಗಳನ್ನು ಒಳಗೊಂಡಿರುವ ದೊಡ್ಡ, ಸಂಕೀರ್ಣ ಪರೀಕ್ಷೆಗಳನ್ನು ಬರೆಯುವುದನ್ನು ತಪ್ಪಿಸಿ. ಚಿಕ್ಕ, ಕೇಂದ್ರೀಕೃತ ಪರೀಕ್ಷೆಗಳು ಅರ್ಥಮಾಡಿಕೊಳ್ಳಲು, ನಿರ್ವಹಿಸಲು ಮತ್ತು ಡೀಬಗ್ ಮಾಡಲು ಸುಲಭ.

7. ಟೆಸ್ಟ್ ಡಬಲ್ಸ್ (ಮಾಕ್ಸ್ ಮತ್ತು ಸ್ಪೈಸ್) ಅನ್ನು ಸೂಕ್ತವಾಗಿ ಬಳಸಿ

ನೀವು ಪರೀಕ್ಷಿಸುತ್ತಿರುವ ಕಾಂಪೊನೆಂಟ್ ಅನ್ನು ಅದರ ಅವಲಂಬನೆಗಳಿಂದ ಪ್ರತ್ಯೇಕಿಸಲು ಟೆಸ್ಟ್ ಡಬಲ್ಸ್ ಉಪಯುಕ್ತವಾಗಿವೆ. ಬಾಹ್ಯ ಸೇವೆಗಳು, API ಕಾಲ್‌ಗಳು, ಅಥವಾ ಇತರ ಕಾಂಪೊನೆಂಟ್‌ಗಳನ್ನು ಅನುಕರಿಸಲು ಮಾಕ್ಸ್ ಮತ್ತು ಸ್ಪೈಸ್ ಬಳಸಿ.

ಉದಾಹರಣೆ: API ಕಾಲ್ ಅನ್ನು ಮಾಕ್ ಮಾಡುವುದು

// UserList.js
import React, { useState, useEffect } from 'react';

function UserList() {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    async function fetchUsers() {
      const response = await fetch('/api/users');
      const data = await response.json();
      setUsers(data);
    }

    fetchUsers();
  }, []);

  return (
    

      {users.map(user => (
        
{user.name}
      ))}
    
  );
}

export default UserList;

// UserList.test.js
import React from 'react';
import { render, screen, waitFor } from '@testing-library/react';
import UserList from './UserList';

global.fetch = jest.fn(() =>
  Promise.resolve({
    json: () => Promise.resolve([
      { id: 1, name: 'John Doe' },
      { id: 2, name: 'Jane Smith' },
    ]),
  })
);

describe('UserList Component', () => {
  it('fetches and displays a list of users', async () => {
    render();

    // Wait for the data to load
    await waitFor(() => screen.getByText('John Doe'));

    expect(screen.getByText('John Doe')).toBeInTheDocument();
    expect(screen.getByText('Jane Smith')).toBeInTheDocument();
  });
});

ವಿವರಣೆ:

• `global.fetch = jest.fn(...)`: `fetch` ಫಂಕ್ಷನ್ ಅನ್ನು ಮಾಕ್ ಮಾಡುತ್ತದೆ ಮತ್ತು ಪೂರ್ವನಿರ್ಧರಿತ ಬಳಕೆದಾರರ ಪಟ್ಟಿಯನ್ನು ಹಿಂತಿರುಗಿಸುತ್ತದೆ. ಇದು ನಿಜವಾದ API ಎಂಡ್‌ಪಾಯಿಂಟ್ ಅನ್ನು ಅವಲಂಬಿಸದೆ ಕಾಂಪೊನೆಂಟ್ ಅನ್ನು ಪರೀಕ್ಷಿಸಲು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ.
• `await waitFor(() => screen.getByText('John Doe'))`: "John Doe" ಪಠ್ಯವು ಡಾಕ್ಯುಮೆಂಟ್‌ನಲ್ಲಿ ಕಾಣಿಸಿಕೊಳ್ಳುವವರೆಗೆ ಕಾಯುತ್ತದೆ. ಡೇಟಾ ಅಸಿಂಕ್ರೋನಸ್ ಆಗಿ ಪಡೆಯುವುದರಿಂದ ಇದು ಅವಶ್ಯಕ.

8. ಎಡ್ಜ್ ಕೇಸ್‌ಗಳು ಮತ್ತು ದೋಷ ನಿರ್ವಹಣೆಯನ್ನು ಪರೀಕ್ಷಿಸಿ

ಕೇವಲ ಸಂತೋಷದ ಹಾದಿಯನ್ನು ಪರೀಕ್ಷಿಸಬೇಡಿ. ಎಡ್ಜ್ ಕೇಸ್‌ಗಳು, ದೋಷ ಸನ್ನಿವೇಶಗಳು, ಮತ್ತು ಗಡಿ ಪರಿಸ್ಥಿತಿಗಳನ್ನು ಪರೀಕ್ಷಿಸಲು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ. ಇದು ಸಂಭಾವ್ಯ ಸಮಸ್ಯೆಗಳನ್ನು ಮುಂಚಿತವಾಗಿ ಗುರುತಿಸಲು ಮತ್ತು ನಿಮ್ಮ ಕಾಂಪೊನೆಂಟ್ ಅನಿರೀಕ್ಷಿತ ಸಂದರ್ಭಗಳನ್ನು ಸೌಜನ್ಯಯುತವಾಗಿ ನಿಭಾಯಿಸುತ್ತದೆ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು ಸಹಾಯ ಮಾಡುತ್ತದೆ.

ಉದಾಹರಣೆ: ದೋಷ ನಿರ್ವಹಣೆಯನ್ನು ಪರೀಕ್ಷಿಸುವುದು

API ನಿಂದ ಡೇಟಾವನ್ನು ಪಡೆಯುವ ಮತ್ತು API ಕಾಲ್ ವಿಫಲವಾದರೆ ದೋಷ ಸಂದೇಶವನ್ನು ಪ್ರದರ್ಶಿಸುವ ಕಾಂಪೊನೆಂಟ್ ಅನ್ನು ಕಲ್ಪಿಸಿಕೊಳ್ಳಿ. API ಕಾಲ್ ವಿಫಲವಾದಾಗ ದೋಷ ಸಂದೇಶವನ್ನು ಸರಿಯಾಗಿ ಪ್ರದರ್ಶಿಸಲಾಗಿದೆಯೇ ಎಂದು ಪರಿಶೀಲಿಸಲು ನೀವು ಪರೀಕ್ಷೆಯನ್ನು ಬರೆಯಬೇಕು.

9. ಪ್ರವೇಶಸಾಧ್ಯತೆಯ ಮೇಲೆ ಗಮನಹರಿಸಿ

ಒಳಗೊಳ್ಳುವ ವೆಬ್ ಅಪ್ಲಿಕೇಶನ್‌ಗಳನ್ನು ರಚಿಸಲು ಪ್ರವೇಶಸಾಧ್ಯತೆ ನಿರ್ಣಾಯಕ. ನಿಮ್ಮ ಕಾಂಪೊನೆಂಟ್‌ಗಳ ಪ್ರವೇಶಸಾಧ್ಯತೆಯನ್ನು ಪರೀಕ್ಷಿಸಲು ಮತ್ತು ಅವುಗಳು WCAG ನಂತಹ ಪ್ರವೇಶಸಾಧ್ಯತೆಯ ಮಾನದಂಡಗಳನ್ನು ಪೂರೈಸುತ್ತವೆ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು RTL ಬಳಸಿ. ಕೆಲವು ಪ್ರಮುಖ ಪ್ರವೇಶಸಾಧ್ಯತೆಯ ಪರಿಗಣನೆಗಳು ಸೇರಿವೆ:

• ಸೆಮ್ಯಾಂಟಿಕ್ HTML: ನಿಮ್ಮ ವಿಷಯಕ್ಕೆ ರಚನೆ ಮತ್ತು ಅರ್ಥವನ್ನು ಒದಗಿಸಲು ಸೆಮ್ಯಾಂಟಿಕ್ HTML ಎಲಿಮೆಂಟ್‌ಗಳನ್ನು (ಉದಾ., ``, `
• ARIA ಗುಣಲಕ್ಷಣಗಳು: ಎಲಿಮೆಂಟ್‌ಗಳ ರೋಲ್, ಸ್ಥಿತಿ, ಮತ್ತು ಗುಣಲಕ್ಷಣಗಳ ಬಗ್ಗೆ ಹೆಚ್ಚುವರಿ ಮಾಹಿತಿಯನ್ನು ಒದಗಿಸಲು ARIA ಗುಣಲಕ್ಷಣಗಳನ್ನು ಬಳಸಿ, ವಿಶೇಷವಾಗಿ ಕಸ್ಟಮ್ ಕಾಂಪೊನೆಂಟ್‌ಗಳಿಗಾಗಿ.
• ಕೀಬೋರ್ಡ್ ನ್ಯಾವಿಗೇಷನ್: ಎಲ್ಲಾ ಸಂವಾದಾತ್ಮಕ ಎಲಿಮೆಂಟ್‌ಗಳು ಕೀಬೋರ್ಡ್ ನ್ಯಾವಿಗೇಷನ್ ಮೂಲಕ ಪ್ರವೇಶಿಸಬಹುದೆಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ.
• ಬಣ್ಣದ ಕಾಂಟ್ರಾಸ್ಟ್: ಕಡಿಮೆ ದೃಷ್ಟಿ ಹೊಂದಿರುವ ಬಳಕೆದಾರರಿಗೆ ಪಠ್ಯವು ಓದಬಲ್ಲದು ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು ಸಾಕಷ್ಟು ಬಣ್ಣದ ಕಾಂಟ್ರಾಸ್ಟ್ ಬಳಸಿ.
• ಸ್ಕ್ರೀನ್ ರೀಡರ್ ಹೊಂದಾಣಿಕೆ: ದೃಷ್ಟಿ ದೋಷವಿರುವ ಬಳಕೆದಾರರಿಗೆ ಅರ್ಥಪೂರ್ಣ ಮತ್ತು ಅರ್ಥವಾಗುವ ಅನುಭವವನ್ನು ಒದಗಿಸುತ್ತವೆಯೇ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು ನಿಮ್ಮ ಕಾಂಪೊನೆಂಟ್‌ಗಳನ್ನು ಸ್ಕ್ರೀನ್ ರೀಡರ್‌ನೊಂದಿಗೆ ಪರೀಕ್ಷಿಸಿ.

ಉದಾಹರಣೆ: `getByRole` ನೊಂದಿಗೆ ಪ್ರವೇಶಸಾಧ್ಯತೆಯನ್ನು ಪರೀಕ್ಷಿಸುವುದು

// MyAccessibleComponent.js
import React from 'react';

function MyAccessibleComponent() {
  return (
    X
  );
}

export default MyAccessibleComponent;

// MyAccessibleComponent.test.js
import React from 'react';
import { render, screen } from '@testing-library/react';
import MyAccessibleComponent from './MyAccessibleComponent';

describe('MyAccessibleComponent', () => {
  it('renders an accessible button with the correct aria-label', () => {
    render();
    const buttonElement = screen.getByRole('button', { name: 'Close' });
    expect(buttonElement).toBeInTheDocument();
  });
});

ವಿವರಣೆ:

• `screen.getByRole('button', { name: 'Close' })`: "Close" ಎಂಬ ಪ್ರವೇಶಿಸಬಹುದಾದ ಹೆಸರಿನೊಂದಿಗೆ ಬಟನ್ ಎಲಿಮೆಂಟ್ ಅನ್ನು ಹುಡುಕಲು `getByRole` ಅನ್ನು ಬಳಸುತ್ತದೆ. ಇದು ಬಟನ್ ಸ್ಕ್ರೀನ್ ರೀಡರ್‌ಗಳಿಗಾಗಿ ಸರಿಯಾಗಿ ಲೇಬಲ್ ಮಾಡಲ್ಪಟ್ಟಿದೆ ಎಂದು ಖಚಿತಪಡಿಸುತ್ತದೆ.

10. ನಿಮ್ಮ ಡೆವಲಪ್‌ಮೆಂಟ್ ವರ್ಕ್‌ಫ್ಲೋನಲ್ಲಿ ಟೆಸ್ಟಿಂಗ್ ಅನ್ನು ಸಂಯೋಜಿಸಿ

ಟೆಸ್ಟಿಂಗ್ ನಿಮ್ಮ ಡೆವಲಪ್‌ಮೆಂಟ್ ವರ್ಕ್‌ಫ್ಲೋನ ಒಂದು ಅವಿಭಾಜ್ಯ ಅಂಗವಾಗಿರಬೇಕು, ನಂತರದ ಯೋಚನೆಯಲ್ಲ. ಕೋಡ್ ಕಮಿಟ್ ಮಾಡಿದಾಗ ಅಥವಾ ನಿಯೋಜಿಸಿದಾಗ ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಪರೀಕ್ಷೆಗಳನ್ನು ನಡೆಸಲು ನಿಮ್ಮ ಪರೀಕ್ಷೆಗಳನ್ನು ನಿಮ್ಮ CI/CD ಪೈಪ್‌ಲೈನ್‌ಗೆ ಸಂಯೋಜಿಸಿ. ಇದು ದೋಷಗಳನ್ನು ಮುಂಚಿತವಾಗಿ ಹಿಡಿಯಲು ಮತ್ತು ರಿಗ್ರೆಷನ್‌ಗಳನ್ನು ತಡೆಯಲು ಸಹಾಯ ಮಾಡುತ್ತದೆ.

11. ಸ್ಥಳೀಕರಣ ಮತ್ತು ಅಂತರರಾಷ್ಟ್ರೀಕರಣವನ್ನು (i18n) ಪರಿಗಣಿಸಿ

ಜಾಗತಿಕ ಅಪ್ಲಿಕೇಶನ್‌ಗಳಿಗಾಗಿ, ಪರೀಕ್ಷೆಯ ಸಮಯದಲ್ಲಿ ಸ್ಥಳೀಕರಣ ಮತ್ತು ಅಂತರರಾಷ್ಟ್ರೀಕರಣವನ್ನು (i18n) ಪರಿಗಣಿಸುವುದು ನಿರ್ಣಾಯಕ. ನಿಮ್ಮ ಕಾಂಪೊನೆಂಟ್‌ಗಳು ವಿವಿಧ ಭಾಷೆಗಳು ಮತ್ತು ಸ್ಥಳಗಳಲ್ಲಿ ಸರಿಯಾಗಿ ರೆಂಡರ್ ಆಗುತ್ತವೆ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ.

ಉದಾಹರಣೆ: ಸ್ಥಳೀಕರಣವನ್ನು ಪರೀಕ್ಷಿಸುವುದು

ಸ್ಥಳೀಕರಣಕ್ಕಾಗಿ ನೀವು `react-intl` ಅಥವಾ `i18next` ನಂತಹ ಲೈಬ್ರರಿಯನ್ನು ಬಳಸುತ್ತಿದ್ದರೆ, ನಿಮ್ಮ ಕಾಂಪೊನೆಂಟ್‌ಗಳು ಸರಿಯಾದ ಅನುವಾದಿತ ಪಠ್ಯವನ್ನು ಪ್ರದರ್ಶಿಸುತ್ತವೆಯೇ ಎಂದು ಪರಿಶೀಲಿಸಲು ನಿಮ್ಮ ಪರೀಕ್ಷೆಗಳಲ್ಲಿ ಸ್ಥಳೀಕರಣದ ಸನ್ನಿವೇಶವನ್ನು ಮಾಕ್ ಮಾಡಬಹುದು.

12. ಪುನರ್ಬಳಕೆಯ ಸೆಟಪ್‌ಗಾಗಿ ಕಸ್ಟಮ್ ರೆಂಡರ್ ಫಂಕ್ಷನ್‌ಗಳನ್ನು ಬಳಸಿ

ದೊಡ್ಡ ಪ್ರಾಜೆಕ್ಟ್‌ಗಳಲ್ಲಿ ಕೆಲಸ ಮಾಡುವಾಗ, ನೀವು ಅನೇಕ ಪರೀಕ್ಷೆಗಳಲ್ಲಿ ಒಂದೇ ಸೆಟಪ್ ಹಂತಗಳನ್ನು ಪುನರಾವರ್ತಿಸುವುದನ್ನು ಕಾಣಬಹುದು. ನಕಲು ಮಾಡುವುದನ್ನು ತಪ್ಪಿಸಲು, ಸಾಮಾನ್ಯ ಸೆಟಪ್ ತರ್ಕವನ್ನು ಒಳಗೊಂಡಿರುವ ಕಸ್ಟಮ್ ರೆಂಡರ್ ಫಂಕ್ಷನ್‌ಗಳನ್ನು ರಚಿಸಿ.

ಉದಾಹರಣೆ: ಕಸ್ಟಮ್ ರೆಂಡರ್ ಫಂಕ್ಷನ್

// test-utils.js
import React from 'react';
import { render } from '@testing-library/react';
import { ThemeProvider } from 'styled-components';
import theme from './theme';

const AllTheProviders = ({ children }) => {
  return (
    
      {children}
    
  );
}

const customRender = (ui, options) =>
  render(ui, { wrapper: AllTheProviders, ...options })

// re-export everything
export * from '@testing-library/react'

// override render method
export { customRender as render }

// MyComponent.test.js
import React from 'react';
import { render, screen } from './test-utils'; // Import the custom render
import MyComponent from './MyComponent';

describe('MyComponent', () => {
  it('renders correctly with the theme', () => {
    render();
    // Your test logic here
  });
});

ಈ ಉದಾಹರಣೆಯು ಕಾಂಪೊನೆಂಟ್ ಅನ್ನು ThemeProvider ನೊಂದಿಗೆ ಸುತ್ತುವ ಕಸ್ಟಮ್ ರೆಂಡರ್ ಫಂಕ್ಷನ್ ಅನ್ನು ರಚಿಸುತ್ತದೆ. ಇದು ಪ್ರತಿ ಪರೀಕ್ಷೆಯಲ್ಲಿ ThemeProvider ಸೆಟಪ್ ಅನ್ನು ಪುನರಾವರ್ತಿಸದೆ ಥೀಮ್ ಅನ್ನು ಅವಲಂಬಿಸಿರುವ ಕಾಂಪೊನೆಂಟ್‌ಗಳನ್ನು ಸುಲಭವಾಗಿ ಪರೀಕ್ಷಿಸಲು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ.

ತೀರ್ಮಾನ

ರಿಯಾಕ್ಟ್ ಟೆಸ್ಟಿಂಗ್ ಲೈಬ್ರರಿ ಕಾಂಪೊನೆಂಟ್ ಟೆಸ್ಟಿಂಗ್‌ಗೆ ಒಂದು ಶಕ್ತಿಯುತ ಮತ್ತು ಬಳಕೆದಾರ-ಕೇಂದ್ರಿತ ವಿಧಾನವನ್ನು ನೀಡುತ್ತದೆ. ಈ ಅತ್ಯುತ್ತಮ ಅಭ್ಯಾಸಗಳನ್ನು ಅನುಸರಿಸುವ ಮೂಲಕ, ನೀವು ಬಳಕೆದಾರರ ನಡವಳಿಕೆ ಮತ್ತು ಪ್ರವೇಶಸಾಧ್ಯತೆಯ ಮೇಲೆ ಗಮನಹರಿಸುವ ನಿರ್ವಹಿಸಬಲ್ಲ, ಪರಿಣಾಮಕಾರಿ ಪರೀಕ್ಷೆಗಳನ್ನು ಬರೆಯಬಹುದು. ಇದು ಜಾಗತಿಕ ಪ್ರೇಕ್ಷಕರಿಗೆ ಹೆಚ್ಚು ದೃಢವಾದ, ವಿಶ್ವಾಸಾರ್ಹ ಮತ್ತು ಒಳಗೊಳ್ಳುವ ರಿಯಾಕ್ಟ್ ಅಪ್ಲಿಕೇಶನ್‌ಗಳಿಗೆ ಕಾರಣವಾಗುತ್ತದೆ. ಬಳಕೆದಾರರ ಸಂವಹನಗಳಿಗೆ ಆದ್ಯತೆ ನೀಡಲು, ಅನುಷ್ಠಾನದ ವಿವರಗಳನ್ನು ಪರೀಕ್ಷಿಸುವುದನ್ನು ತಪ್ಪಿಸಲು, ಪ್ರವೇಶಸಾಧ್ಯತೆಯ ಮೇಲೆ ಗಮನಹರಿಸಲು ಮತ್ತು ನಿಮ್ಮ ಡೆವಲಪ್‌ಮೆಂಟ್ ವರ್ಕ್‌ಫ್ಲೋನಲ್ಲಿ ಟೆಸ್ಟಿಂಗ್ ಅನ್ನು ಸಂಯೋಜಿಸಲು ಮರೆಯದಿರಿ. ಈ ತತ್ವಗಳನ್ನು ಅಳವಡಿಸಿಕೊಳ್ಳುವ ಮೂಲಕ, ನೀವು ಜಗತ್ತಿನಾದ್ಯಂತದ ಬಳಕೆದಾರರ ಅಗತ್ಯಗಳನ್ನು ಪೂರೈಸುವ ಉತ್ತಮ ಗುಣಮಟ್ಟದ ರಿಯಾಕ್ಟ್ ಅಪ್ಲಿಕೇಶನ್‌ಗಳನ್ನು ನಿರ್ಮಿಸಬಹುದು.

ಪ್ರಮುಖ ಅಂಶಗಳು:

• ಬಳಕೆದಾರರ ಸಂವಹನಗಳ ಮೇಲೆ ಗಮನಹರಿಸಿ: ಬಳಕೆದಾರರು ಸಂವಹನ ನಡೆಸುವ ರೀತಿಯಲ್ಲಿ ಕಾಂಪೊನೆಂಟ್‌ಗಳನ್ನು ಪರೀಕ್ಷಿಸಿ.
• ಪ್ರವೇಶಸಾಧ್ಯತೆಗೆ ಆದ್ಯತೆ ನೀಡಿ: ನಿಮ್ಮ ಕಾಂಪೊನೆಂಟ್‌ಗಳು ಅಂಗವಿಕಲ ಬಳಕೆದಾರರಿಗೆ ಪ್ರವೇಶಿಸಬಹುದೆಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ.
• ಅನುಷ್ಠಾನದ ವಿವರಗಳನ್ನು ತಪ್ಪಿಸಿ: ಆಂತರಿಕ ಸ್ಥಿತಿ ಅಥವಾ ಫಂಕ್ಷನ್ ಕಾಲ್‌ಗಳನ್ನು ಪರೀಕ್ಷಿಸಬೇಡಿ.
• ಸ್ಪಷ್ಟ ಮತ್ತು ಸಂಕ್ಷಿಪ್ತ ಪರೀಕ್ಷೆಗಳನ್ನು ಬರೆಯಿರಿ: ನಿಮ್ಮ ಪರೀಕ್ಷೆಗಳನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳಲು ಮತ್ತು ನಿರ್ವಹಿಸಲು ಸುಲಭವಾಗಿಸಿ.
• ನಿಮ್ಮ ವರ್ಕ್‌ಫ್ಲೋನಲ್ಲಿ ಟೆಸ್ಟಿಂಗ್ ಅನ್ನು ಸಂಯೋಜಿಸಿ: ನಿಮ್ಮ ಪರೀಕ್ಷೆಗಳನ್ನು ಸ್ವಯಂಚಾಲಿತಗೊಳಿಸಿ ಮತ್ತು ಅವುಗಳನ್ನು ನಿಯಮಿತವಾಗಿ ಚಲಾಯಿಸಿ.
• ಜಾಗತಿಕ ಪ್ರೇಕ್ಷಕರನ್ನು ಪರಿಗಣಿಸಿ: ನಿಮ್ಮ ಕಾಂಪೊನೆಂಟ್‌ಗಳು ವಿವಿಧ ಭಾಷೆಗಳು ಮತ್ತು ಸ್ಥಳಗಳಲ್ಲಿ ಉತ್ತಮವಾಗಿ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತವೆ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ.